import { ref, onMounted, onBeforeUnmount, markRaw } from 'vue';
import * as echarts from 'echarts';

export function useChart(chartRef, setChartData) {
    const chartInstance = ref(null);
    // 初始化图表实例。
    const initChart = async () => {
        if (chartRef.value) {
            chartInstance.value = markRaw(echarts.init(chartRef.value));
            const options = await setChartData()
            //    更改配置项
            chartInstance.value.setOption(options)
        }
    }

    // 图表尺寸调整
    const resizeChart = () => {
        chartInstance.value?.resize(); // 可选链操作符（?.）的使用
    };

    onMounted(() => {
        initChart();
        window.addEventListener('resize', resizeChart);
    });

    // 防止内存泄漏
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resizeChart);
        if (chartInstance.value) {
            chartInstance.value.dispose(); // dispose 方法的作用是释放图表实例所占用的资源，以便在不再需要图表时清理内存
        }
    });
} 